<template>
  <a-modal :title="formTile + '图案'" :visible="true" width="90%" :footer="null" @cancel="reset">
    <a-card style="padding-right:100px" id="patternAdd">
      <a-row type="flex" justify="start" align="top">
        <a-col :span="24">
          <a-form :form="form" style="display:flex;flex-wrap: wrap;" @submit="handleSubmit"
            :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
            <div :style="{ width: groupName == '外采组' || groupName == '设计组' ? '50%' : '100%' }">
              <a-form-item label="名称" :required="true">
                <a-input placeholder="请输入名称" :maxLength="40" allow-clear v-decorator="[
                  `name`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入名称'
                      }
                    ]
                  }
                ]" />
              </a-form-item>

              <a-form-item label="品牌" :required="true">
                <a-select placeholder="请选择品牌" @change="selectChange" v-decorator="['brandCode', {
                  rules: [{ required: true, message: '请选择品牌!' }],
                },]" allow-clear>
                  <!-- <a-select-option :value="item.code" v-for="(item, index) in brands" :key="`${item.code}-${index}`"> -->
                    <a-select-option :value="item.code" v-for="(item, index) in brands" :key="index"> 
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="季节" :required="true">
                <a-select allow-clear show-search placeholder="请选择季节" v-decorator="[
                  'season',
                  {
                    rules: [{ required: true, message: '请选择季节!' }]
                  }
                ]">
                  <a-select-option :value="item.code" v-for="item in seasons" :key="item.code">
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="图案分类" :required="true">
                <!-- :load-data="loadElement" -->
                <a-tree-select v-decorator="['categoryIds', {
                    rules: [{ required: true, message: '请选择图案分类!' }]
                  }]" mode="multiple" tree-data-simple-mode style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="patternType"
                  placeholder="请选择图案分类" tree-node-filter-prop="name" treeCheckable @onChange="test"
                  :replaceFields="{ children: 'children', title: 'name', key: 'id', value: 'id' }" />
              </a-form-item>
              <a-form-item label="面料编号">
                <a-input placeholder="请输入面料编号" allow-clear v-decorator="[
                  `fabricCode`,
                ]" />
              </a-form-item>
              <a-form-item label="是否是装饰辅料" v-if="showItem">
                <a-switch
                  v-decorator="['decorateAccessories', { initialValue: false, valuePropName: 'checked', rules: [{ required: true, message: '请选择' }] }]"></a-switch>
              </a-form-item>
              <!-- <a-form-item label="是否有英文">
                <a-switch
                  v-decorator="['whetherHasEnglish', { initialValue: false, valuePropName: 'checked', rules: [{ required: true, message: '请选择是否有英文' }] }]"
                  @change="switchLang"></a-switch>
              </a-form-item>
              <a-form-item label="英文原文" v-if="showEn">
                <a-textarea allow-clear placeholder="请输入英文原文"
                  v-decorator="['englishOriginal', { rules: [{ required: true, message: '请输入英文原文' }] }]"></a-textarea>
              </a-form-item>
              <a-form-item label="英文解释" v-if="showEn">
                <a-textarea allow-clear placeholder="请输入英文解释"
                  v-decorator="['englishExplain', { rules: [{ required: true, message: '请输入英文解释' }] }]"></a-textarea>
              </a-form-item> -->
              <!-- <a-form-item label="图案出处" allow-clear>
                <a-radio-group name="radioGroup"
                  v-decorator="['source', { initialValue: 1, rules: [{ required: true, message: '请选择图案出处!' }] }]">
                  <a-radio :value="1"> 原创 </a-radio>
                  <a-radio :value="2"> 借鉴 </a-radio>
                  <a-radio :value="3"> 出处 </a-radio>
                </a-radio-group>
              </a-form-item> -->
              <a-form-item label="创作过程">
                <a-textarea allow-clear placeholder="请输入创作过程"
                  v-decorator="['creativeProcess', { rules: [{ message: '请输入创作过程' }] }]"></a-textarea>
              </a-form-item>
              <a-form-item label="创作完成时间">
                <a-date-picker
                  v-decorator="['creativeCompleteDate', { initialValue: undefined, rules: [{ message: '请选择创作完成时间' }] }]"
                  format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
              </a-form-item>
              <a-form-item label="创作完成地点">
                <a-input placeholder="请输入创作完成地点" allow-clear v-decorator="[
                  `creativeCompleteLocation`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        message: '请输入创作完成地点'
                      }
                    ]
                  }
                ]" />
              </a-form-item>
              <a-form-item label="作品首次发表时间">
                <a-date-picker
                  v-decorator="['firstPublishDate', { initialValue: undefined, rules: [{ message: '请选择作品首次发表时间' }] }]"
                  format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
              </a-form-item>
              <a-form-item label="首次发表地点">
                <a-input placeholder="请输入首次发表地点" allow-clear v-decorator="[
                  `firstPublishLocation`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        message: '请输入首次发表地点'
                      }
                    ]
                  }
                ]" />
              </a-form-item>
              <!-- <a-form-item label="是否存在敏感风险">
                <a-switch v-decorator="[
                  'riskFlag',
                  { initialValue: false, valuePropName: 'checked', rules: [{ required: true, message: '请选择是否存在敏感风险！' }] },
                ]" @change="changeRisk"></a-switch>
              </a-form-item>
              <a-form-item v-if="showRisk" label="敏感风险">
                <a-checkbox-group v-decorator="['risk', { rules: [{ required: true, message: '请选择存在的敏感风险！' }] }]">
                  <a-row>
                    <a-col :span="20" v-for="(item, index) in riskList" :key="index">
                      <a-checkbox :value="item.value">
                        {{ item.title }}
                        <a-popover>
                          <template slot="content">
                            <p v-for="(tip, index) in item.tips" :key="index">
                              {{ tip }}
                            </p>

                          </template>
                          <a-icon type="question-circle" theme="twoTone" class="tips" />
                        </a-popover>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
              </a-form-item> -->
              <!-- <a-form-item label="含义">
                <a-textarea allow-clear placeholder="请输入含义"
                  v-decorator="['meaning', { rules: [{ required: true, message: '请输入含义' }] }]"></a-textarea>
              </a-form-item> -->
              <a-form-item label="元素" v-if="showItem">
                <!-- :load-data="loadElement" -->
                <a-tree-select v-decorator="['elements']" tree-data-simple-mode style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="categoryFull" placeholder="请选择元素"
                  tree-node-filter-prop="name" treeCheckable @onChange="test"
                  :replaceFields="{ children: 'children', title: 'name', key: 'id', value: 'id' }" />
              </a-form-item>
            </div>
            <div style="width:50%">
              <div v-if="groupName == '外采组'">
                <a-form-item label="供应商名称"  :required="true">
                  <a-input placeholder="请输入供应商名称" allow-clear v-decorator="[`supplyName`, {
                  rules: [{ required: true, message: '请输入供应商名称!' }],
                }]" />
                </a-form-item>
                <a-form-item label="是否涉及特殊工艺">
                  <a-switch v-decorator="['specialProcess', { initialValue: false, valuePropName: 'checked' }]"
                    @change="changespecial"></a-switch>
                </a-form-item>
                <a-form-item label="供应商是否有专利" v-if="showHasPatent">
                  <a-switch v-decorator="['supplyHasPatent', { initialValue: false, valuePropName: 'checked' }]"
                    @change="changeHasPatent"></a-switch>
                </a-form-item>
                <a-form-item label="供应商是否可提供专利证明文件" v-if="showHasPatent && showsupplyOriginal" style="color: red;" :help="'如为是，请于文件处上传专利证明文件'">
                  <a-switch
                    v-decorator="['supplyHasPatentFile', { initialValue: false, valuePropName: 'checked' }]"></a-switch>
                </a-form-item>
                <a-form-item label="面料花纹是否供应商原创" :required="true">
                  <!-- <a-switch @change="changeoriginal"
                    v-decorator="['supplyOriginal', { initialValue: false, valuePropName: 'checked' }]"></a-switch> -->
                    <a-radio-group name="radioGroup" @change="changeoriginal"
                    v-decorator="['supplyOriginal', { initialValue: 1 ,rules: [{ required: true, message: '请选择面料花纹是否供应商原创!' }],}]" >
                    <a-radio :value="1"> 供应商原创 </a-radio>
                    <a-radio :value="0"> 非供应商原创 </a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="花纹来源" v-if="!showOriginal" :required="true">
                  <a-textarea allow-clear placeholder="请输入花纹来源" v-decorator="['figureSource', {
                  rules: [{ required: true, message: '请输入花纹灵感说明!' }],
                }]"></a-textarea>
                </a-form-item>
                <a-form-item label="供应商是否可提供原创证明文件" v-if="showOriginal" help="如为是，请于文件处上传原创证明文件">
                  <a-switch
                    v-decorator="['supplyOriginalProve', { initialValue: false, valuePropName: 'checked' }]"></a-switch>
                </a-form-item>
                <a-form-item label="供应商是否可提供花纹授权文件" v-if="!showOriginal" help="如为是，请于文件处上传授权证明文件">
                  <a-switch
                    v-decorator="['supplyOriginalAuthorization', { initialValue: false, valuePropName: 'checked' }]"></a-switch>
                </a-form-item>
                <a-form-item label="花纹灵感说明" :required="true">
                  <a-textarea allow-clear placeholder="请输入花纹灵感说明" v-decorator="['supplyInspiration', {
                  rules: [{ required: true, message: '请输入花纹灵感说明!' }],
                }]"></a-textarea>
                </a-form-item>
                <a-form-item label="文件" help="上传专利证明、原创证明、授权文件等">
                  <a-upload name="file" :multiple="true" list-type="picture" class="avatar-uploader" :action="uploadFile"
                    :data="{ type: 2 }" :fileList="fileList" :beforeUpload="beforeUpload"
                    @change="e => handleChange(e, 'fileList')" v-decorator="[
                      'moreFile',
                      { initialValue: false },
                    ]">
                    <a-button>选择文件 </a-button>
                  </a-upload>
                </a-form-item>
              </div>
              <div v-if="groupName == '设计组'">
                <a-form-item label="是否合作款">
                  <a-switch @change="changeCooperation"
                    v-decorator="['cooperation', { initialValue: false, valuePropName: 'checked' }]"></a-switch>
                </a-form-item>
                <a-form-item label="合作文件" v-if="showCooperation">
                  <a-upload name="file" :multiple="true" list-type="picture" class="avatar-uploader" :action="uploadFile"
                    :data="{ type: 2 }" :fileList="fileList1" :beforeUpload="beforeUpload"
                    @change="e => handleChange(e, 'fileList1')" v-decorator="[
                      'cooperationContractUrl',
                      { initialValue: false, rules: [{ required: true, message: '请上传合作文件！' }] },
                    ]">
                    <a-button>选择文件 </a-button>
                  </a-upload>
                </a-form-item>
                <a-form-item label="是否有图案">
                  <a-switch @change="changePattern"
                    v-decorator="['patternFlag', { initialValue: false, valuePropName: 'checked' }]"></a-switch>
                </a-form-item>
                <a-form-item label="图案出处" v-if="showPattern">
                  <a-radio-group name="radioGroup" @change="changePatternSource"
                    v-decorator="['patternSource', { initialValue: 10, rules: [{ required: true, message: '请选择图案出处!' }] }]">
                    <a-radio :value="10"> 原创 </a-radio>
                    <a-radio :value="20"> 设计灵感借鉴 </a-radio>
                    <a-radio :value="30"> 直接使用 </a-radio>
                    <a-radio :value="40"> 改动后使用 </a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="借鉴/原始图案" v-if="showPattern && showPatternSource && showPatternSource != 10">
                  <a-upload name="file" :multiple="true" list-type="picture" class="avatar-uploader" :action="uploadFile"
                    :data="{ type: 2 }" :fileList="fileList2" :beforeUpload="beforeUpload"
                    @change="e => handleChange(e, 'fileList2')" v-decorator="[
                      'patternOriginUrl',
                      { initialValue: false, rules: [{ required: true, message: '请上传原始图案！' }] },
                    ]">
                    <a-button>选择文件 </a-button>
                  </a-upload>
                </a-form-item>
                
                <a-form-item label="图案来源" v-if="showPattern && showPatternSource && showPatternSource != 10">
                    <a-input allow-clear placeholder="请输入图案来源"
                    v-decorator="['patternOrigin', { rules: [{ required: true, message: '请输入图案来源' }] }]" />
                </a-form-item>
                <!-- <a-form-item label="原始图案发表时间" v-if="showPattern && showPatternSource && showPatternSource != 10">
                    <a-input allow-clear placeholder="请输入原始图案发表时间"
                    v-decorator="['patternOriginPostedTime', { rules: [{ required: true, message: '请输入原始图案发表时间' }] }]" />
                </a-form-item>
                <a-form-item label="原始图案发表方式" v-if="showPattern && showPatternSource && showPatternSource != 10">
                  <a-input allow-clear placeholder="请输入原始图案发表方式"
                    v-decorator="['patternOriginIssuingWay', { rules: [{ required: true, message: '请输入原始图案发表方式' }] }]" />
                </a-form-item>
                <a-form-item label="原始图案作者"
                  v-if="showPattern && showPattern && showPatternSource && showPatternSource != 10">
                  <a-input allow-clear placeholder="请输入原始图案作者"
                    v-decorator="['patternOriginAuthor', { rules: [{ required: true, message: '请输入原始图案作者' }] }]" />
                </a-form-item>
                 -->
                <a-form-item label="是否有授权" v-if="showPattern && showPatternSource && showPatternSource != 10">
                  <a-switch @change="changeAuthorization"
                    v-decorator="['patternAuthorization', { initialValue: false, valuePropName: 'checked' }]"></a-switch>
                </a-form-item>
                <a-form-item label="授权文件"
                  v-if="showPattern && showAuthorization && showPatternSource && showPatternSource != 10">
                  <a-upload name="file" :multiple="true" list-type="picture" class="avatar-uploader" :action="uploadFile"
                    :data="{ type: 2 }" :fileList="fileList3" :beforeUpload="beforeUpload"
                    @change="e => handleChange(e, 'fileList3')" v-decorator="[
                      'patternAuthorizationUrl',
                      { initialValue: false, rules: [{ required: true, message: '请上传合作文件！' }] },
                    ]">
                    <a-button>选择文件 </a-button>
                  </a-upload>
                </a-form-item>
                <a-form-item label="设计灵感说明" v-if="showPattern">
                  <a-textarea allow-clear placeholder="请输入设计灵感说明"
                    v-decorator="['patternInspiration', { rules: [{ required: true, message: '请输入设计灵感说明!' }] }]"></a-textarea>
                </a-form-item>
                <a-form-item label="是否有文字">
                  <a-switch @change="changeWordage"
                    v-decorator="['wordage', { initialValue: false, valuePropName: 'checked' }]"></a-switch>
                </a-form-item>
                <a-form-item label="语言类型" v-if="showWordage">
                  <div style="display:flex;margin-top: 8px;">
                    <a-radio-group name="radioGroup" @change="changeLanguageType"
                      v-decorator="['languageType', { initialValue: 10, rules: [{ required: true, message: '请选择语言类型!' }] }]">
                      <a-radio :value="10"> 中文 </a-radio>
                      <a-radio :value="20"> 英文 </a-radio>
                      <a-radio :value="30"> 法文 </a-radio>
                      <a-radio :value="40"> 意大利文 </a-radio>
                      <a-radio :value="50"> 其他 </a-radio>
                    </a-radio-group>
                    <a-textarea v-if="showWordage && languageType == 50" allow-clear placeholder="请输入语言类型其他说明"
                      v-decorator="['languageRestsExplain']"></a-textarea>
                  </div>

                </a-form-item>
                <a-form-item label="字体出处" v-if="showWordage">
                  <a-radio-group name="radioGroup" @change="changetypefaceSource"
                    v-decorator="['typefaceSource', { initialValue: 10, rules: [{ required: true, message: '请选择字体出处!' }] }]">
                    <a-radio :value="10"> 原创 </a-radio>
                    <a-radio :value="20"> 直接使用 </a-radio>
                    <a-radio :value="30"> 改动后使用 </a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="字体类型" v-if="showWordage && showtypefaceSource && showtypefaceSource != 10">
                  <a-input allow-clear placeholder="请输入字体类型"
                    v-decorator="['typefaceType', { rules: [{ required: true, message: '请输入字体类型!' }] }]" />
                </a-form-item>
                <a-form-item label="字体原始图" v-if="showWordage && showtypefaceSource && showtypefaceSource != 10">
                  <a-upload name="file" :multiple="true" list-type="picture" class="avatar-uploader" :action="uploadFile"
                    :data="{ type: 2 }" :fileList="fileList4" :beforeUpload="beforeUpload"
                    @change="e => handleChange(e, 'fileList4')" v-decorator="[
                      'typefaceOriginUrl',
                      { initialValue: false },
                    ]">
                    <a-button>选择文件 </a-button>
                  </a-upload>
                </a-form-item>
                <a-form-item label="来源" v-if="showWordage && showtypefaceSource&& showtypefaceSource != 10">
                  <div style="display: flex;margin-top: 8px;">
                    <a-radio-group name="radioGroup" @change="changetypefaceOrigin"
                      v-decorator="['typefaceOrigin', { initialValue: 10, rules: [{ required: true, message: '请选择来源!' }] }]">
                      <a-radio :value="10"> 免费字体 </a-radio>
                      <a-radio :value="20"> 授权使用 </a-radio>
                      <a-radio :value="30"> 其他 </a-radio>
                    </a-radio-group>
                    <a-textarea v-if="showtypefaceOrigin == 30" allow-clear placeholder="请输入字体来源其他说明"
                      v-decorator="['typefaceOriginRestsExplain']"></a-textarea>
                  </div>
                </a-form-item>
                <a-form-item label="字体来源文件" v-if="showWordage && showtypefaceSource" help="如合同、授权书、免费使用公告等">
                  <a-upload name="file" :multiple="true" list-type="picture" class="avatar-uploader" :action="uploadFile"
                    :data="{ type: 2 }" :fileList="fileList5" :beforeUpload="beforeUpload"
                    @change="e => handleChange(e, 'fileList5')" v-decorator="[
                      'typefaceOriginProveUrl',
                      { initialValue: false },
                    ]">
                    <a-button>选择文件 </a-button>
                  </a-upload>
                </a-form-item>
                <!-- <a-form-item label="字体来源其他说明" v-if="showWordage && showtypefaceOrigin == 30">
                  <a-textarea allow-clear placeholder="请输入字体来源其他说明"
                    v-decorator="['typefaceOriginRestsExplain']"></a-textarea>
                </a-form-item> -->
                <a-form-item label="文字含义" v-if="showWordage" help="填写文字内容含义以及文字内容的来源">
                  <a-textarea allow-clear placeholder="请输入文字含义"
                    v-decorator="['typefaceMeaning', { rules: [{ required: true, message: '请输入文字含义!' }] }]"></a-textarea>
                </a-form-item>
              </div>
            </div>
            <!-- <a-form-item label="备注">
              <a-textarea
                allow-clear
                placeholder="请输入备注"
                v-decorator="['remarks', { rules: [{ required: true, message: '请输入备注' }] }]"
              ></a-textarea>
            </a-form-item> -->
            <a-row style="width:100%">
              <a-col :span="16" :offset="8" class="info-action">
                <a-button type="primary" @click="reset">返回</a-button>
                <!-- <a-button type="primary" class="ml-20" @click="toUpdateStatus">提交</a-button> -->
                <a-button type="primary" class="ml-20" html-type="submit" :loading="loading">保存</a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
  </a-modal>
</template>

<script>
import { getSystemPro, currencyCreate, currencyUpdate, queryDetail, queryExtendInfo, uploadFile, queryFull, toUpdateStatus } from '@api/pattern/index.js'
import { postAction } from '@/api/manage'

const riskList = [
  {
    title: '原创／著作问题',
    value: '10',
    tips: [
      '1.包含其他作品(艺术品/画作等)或者其他品牌logo。例如：未经授权不可包含第三方作品及其他品牌logo',
      '2.包含一些个人隐私信息。例如：素材中不能包含个人信息、名字、手机、身份证、车牌等',
      '3.没有肖像授权。例如：素材中的模特需提前签订肖像授权',
      '4.包含一些无法提供证明的用词?“最”"第一等。例如：素材中不能出现无法提供报告证明的文字描述，违反广告法'
    ]
  },
  {
    title: '社会和谐',
    value: '20',
    tips: [
      '1.有恐怖、暴力倾向。例如：枪支，而腥、斗殴，愤怒等，暴力也包含冷暴力',
      '2.有色情或性暗示倾向。例如：过度裸震姿势暗示性元素及语言等',
      '3.有邪教图案。例如：佛像、撒旦元素、耶稣十字架、法轮功等',
      '4.有恋童倾向。例如：儿童做一些性暗示的动作，或者和此类元素互动'
    ]
  },
  {
    title: '政治敏感',
    value: '30',
    tips: [
      '1.包含了错误的地图及地域信息。例如：台湾问题及地图不完整，涉及国家主权问题',
      '2.提及人物是否有反华的言论。例如：D&G创始人在facebook的言论',
      '3.有辱华的元素。例如：东方人丑化=眯眯眼，三只松鼠海报事件',
      '4.包含一些历史事件元素。例如：历史革命的元素和标志，“平等”“主席像”“坦克”等',
      '5.发布时间，是否恰当。例如：918事变，77卢沟桥事变，1213南京大屠杀。512汶川地震等',
      '6.包含其他国家的国旗、军旗、侵略国的元素。例如：穿国旗事件，靖国神社前拍照'
    ]
  },
  {
    title: '文化歧视',
    value: '40',
    tips: [
      '1.影射种族歧视。例如：有色人群:黑人=猩猩，辱华:中国人=眯眯眼',
      '2.对女性的物化及不尊重。例如：存在对物化、过度定义不尊重',
      '3.少于50%是中国亚洲模特。例如：中国设计师品牌的立场',
      '4.对特殊人群的暗讽。例如：佛像，撒日元素，耶稣十字架，法轮功等'
    ]
  },
  {
    title: '语言问题',
    value: '50',
    tips: ['1.英文含义解读是否有风险。例如：welcometo hell，不能当作图案使用', '2.英文表示在西方文化中是否有双关含义。例如：Dog 直译是狗，但会有侮辱嫌疑，可以改用puppy']
  },
  {
    title: '未成年人风险',
    value: '60',
    tips: [
      '1.是否含有引发未成年人模仿违反社会公德的行为和违法犯罪的行为。',
      '2.是否含有恐怖、残酷等可能妨害未成年人身心健康的行为。',
      '3.是否含有可能引发未成年人模仿的不安全行为。',
      '4.是否可能引发未成年人产生不良情绪、养成不良嗜好。',
      '5.如素材涉及境外文化作品的，是否来源于国内审定引进版本'
    ]
  }
]
export default {
  props: {
    patternId: {
      type: [Number, String],
      default: ''
    }
  },

  data() {
    return {
      riskList,
      uploadFile,
      autoExpandParent: true,
      tip: '如未选择元素，系统将自动使用图案的第一个颜色图片作为元素关联图案',
      seasons: [],
      brands: [],
      current: 1,
      size: 1000,
      total: 0,
      linkName: '',
      loading: false,
      showHasPatent: false,
      showsupplyOriginal: false,
      showOriginal: true,
      showCooperation: false,
      showPattern: false,
      brandCode:'',
      showPatternSource: 10,
      showAuthorization: false,
      showWordage: false,
      typefaceOrigin: false,
      showtypefaceOrigin: 10,
      showtypefaceSource: false,
      fileds: [],
      uploading: false,
      languageType: '',
      ifElements: true,
      treevalue: [],
      templates: [],
      formItemLayout: {
        labelCol: {
          xl: { span: 9 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 15 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      imageUrl: '',
      record: null,
      pushType: undefined,
      formTile: '新增',
      showEn: false,
      showRisk: false,
      showItem: true,
      pattern: null,
      groupName: '',
      elementArr: [],
      categoryFull: [],
      patternType: [],
      elementsList: [],
      value: undefined
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    },
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'category' })
  },

  created() {
    let pathname = window.location.pathname
    let pathArr = pathname.split('/')
    console.log(pathArr)
    pathArr.map(item => {
      if (item == 'brandKv') {
        this.showItem = false
      }
    })
    this.getsysPro()
    this.getBrandList()
    this.getCategoryListFull()
    // this.getpatternType()
    this.getAuth()
    const { patternId } = this.$props
    if (patternId) {
      this.formTile = '编辑'
      this.$nextTick(()=>{
        this.getDetail(patternId)
      })
    }

  },

  methods: {
    test(value, label, extra) {
      console.log(value, label)
    },
    getAuth() {
      try {
        postAction(`/imagemanage-center/account/list`, { jobNumber: this.jobNumber }).then(data => {
          if (data.code == 200) {
            this.groupName = data.data.records[0].groupName
            if (this.patternId) {
              this.getExtendDetail(this.patternId)
            }
          } else {
            this.$message.warning(data.msg)
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
      finally {
        this.loading = false

      }
    },
    async getCategoryListFull(brand) {
      this.categoryFull = []
      const data = {
        jobNumber: this.jobNumber,
        brand: brand,
        elementFlag: 1,
        type: 10
      }
      const res = await queryFull('category', data)
      res.data = res.data.map(item => {
        item.id = 'f' + item.id
        item.disabled = true
        // item.disableCheckbox = true
        item.children = item.elements
        return item
      })
      this.categoryFull = res.data
      // console.log(this.categoryFull)
    },
    async getpatternType(brand) {
      this.patternType = []
      const data = {
        jobNumber: this.jobNumber,
        brand: brand,
        elementFlag: 1,
        type: 20
      }
      const res = await queryFull('category', data)
      res.data = res.data.map(item => {
        item.id = 'f' + item.id
        item.disabled = true
        // item.disableCheckbox = true
        item.children = item.childCategory
        item.children.map((subitem) => {
          subitem.disabled = true
          subitem.children = subitem.childCategory
        })
        return item
      })
      this.patternType = res.data
      // console.log(this.categoryFull)
    },
    selectChange(brand) {
      this.getCategoryListFull(brand)
      this.form.resetFields('categoryIds')
      this.getpatternType(brand)
    },
    beforeUpload(file, fileList) {
      return new Promise((resolve, reject) => {
        if (file) {
          const size = file.size / 1024 / 1024
          if (size > 5) {
            this.$message.error('文件大小不能超过5M')
            reject(file)
          }
          resolve(file)
        }
      })
    },
    handleChange(info, list) {
      let fileList = [...info.fileList]
      this[list] = info.fileList
      if (info.file.status === 'uploading') {
        this.uploading = true
        return
      }
      if (info.file.status === 'done') {
        this.uploading = false
        let list = fileList.map(file => {
          if (file.response) {
            if (file.response.code == 200) {
              file.url = file.response.data.url
            } else {
              this.$message.error('文件上传失败')
              this[list].pop()
              return fileList
            }
          }
          return file
        })
        this[list] = list
      }
      if (info.file.status === 'error') {
        this.$message.error('文件上传失败')
      }
      console.log(this[list]);
    },
    async getExtendDetail(patternId) {
      const res = await queryExtendInfo('pattern', { patternId })
      if (res.data.brandCode) {
        this.getCategoryListFull(res.data.brandCode)
      }
      this.pattern = res.data
      this.$nextTick(() => {
        this.form.setFieldsValue({
          cooperation: res.data.cooperation == 1,
          patternFlag: res.data.patternFlag == 1,
          patternAuthorization: res.data.patternAuthorization == 1,
          wordage: res.data.wordage == 1,
          supplyName: res.data.supplyName,
          specialProcess: res.data.specialProcess == 1,
          supplyOriginal: res.data.supplyOriginal,
          supplyInspiration: res.data.supplyInspiration,
        })
        if (res.data.specialProcess == 1) {
          this.showHasPatent = true
          this.$nextTick(() => {
            this.form.setFieldsValue({
              supplyHasPatent: res.data.supplyHasPatent == 1
            })
          })
        }
        if (res.data.supplyHasPatent == 1) {
          this.showsupplyOriginal = true
          this.$nextTick(() => {
            this.form.setFieldsValue({
              supplyHasPatentFile: res.data.supplyHasPatentFile == 1
            })
          })
        }
        if (res.data.wordage == 1) {
          this.showWordage = true
          this.$nextTick(() => {
            this.form.setFieldsValue({
              languageType: res.data.languageType,
              typefaceSource: res.data.typefaceSource,
              typefaceType: res.data.typefaceType,
              typefaceOrigin: res.data.typefaceOrigin,
              typefaceOriginRestsExplain: res.data.typefaceOriginRestsExplain,
              typefaceMeaning: res.data.typefaceMeaning,
              languageRestsExplain: res.data.languageRestsExplain
            })
          })
          this.languageType = res.data.languageType
        }
        if (res.data.supplyOriginal == 1) {
          this.showOriginal = true
          this.$nextTick(() => {
            this.form.setFieldsValue({
              supplyOriginalProve: res.data.supplyOriginalProve == 1,
              
            })
          })
        } else {
          this.showOriginal = false
          this.$nextTick(() => {
            this.form.setFieldsValue({
              supplyOriginalAuthorization: res.data.supplyOriginalAuthorization == 1,
              figureSource:res.data.figureSource
            })
          })
        }
        if (res.data.moreFile) {
          const newArr = res.data.moreFile.split(',')
          this.fileList = newArr.map(item => {
            return {
              name: item,
              uid: item,
              status: 'done',
              url: item
            }
          })
        }
        if (res.data.patternFlag == 1) {
          this.showPattern = true
          this.$nextTick(() => {
            this.form.setFieldsValue({
              patternFlag: true,
              patternInspiration: res.data.patternInspiration,
              patternSource: res.data.patternSource,
              patternOrigin:res.data.patternOrigin
              // patternOriginPostedTime: res.data.patternOriginPostedTime,
              // patternOriginIssuingWay: res.data.patternOriginIssuingWay,
              // patternOriginAuthor: res.data.patternOriginAuthor,
            })
          })
        }

        if (res.data.cooperation == 1) {
          this.showCooperation = true
          const newArr = res.data.cooperationContractUrl.split(',')
          this.fileList1 = newArr.map(item => {
            return {
              name: item,
              uid: item,
              status: 'done',
              url: item
            }
          })
        }
        this.showPatternSource = res.data.patternSource > 0 ? res.data.patternSource : false
        if (res.data.patternSource && res.data.patternSource != 10) {
          const newArr = res.data.patternOriginUrl.split(',')
          this.fileList2 = newArr.map(item => {
            return {
              name: item,
              uid: item,
              status: 'done',
              url: item
            }
          })
        }
        if (res.data.patternAuthorization == 1) {
          this.showAuthorization = true
          const newArr = res.data.patternAuthorizationUrl.split(',')
          this.fileList3 = newArr.map(item => {
            return {
              name: item,
              uid: item,
              status: 'done',
              url: item
            }
          })
        }
        this.showtypefaceSource = res.data.typefaceSource > 0 ? res.data.typefaceSource : false
        if (res.data.typefaceSource && res.data.typefaceSource != 10) {
          const newArr = res.data.typefaceOriginUrl.split(',')
          this.fileList4 = newArr.map(item => {
            return {
              name: item,
              uid: item,
              status: 'done',
              url: item
            }
          })
        }
        this.showtypefaceOrigin = res.data.typefaceOrigin
        if (res.data.typefaceOrigin && res.data.typefaceOrigin == 20 || res.data.typefaceOrigin == 30) {
          const newArr = res.data.typefaceOriginProveUrl.split(',')
          this.fileList5 = newArr.map(item => {
            return {
              name: item,
              uid: item,
              status: 'done',
              url: item
            }
          })
        }


      })
    },
    async getDetail(id) {
      const res = await queryDetail('pattern', { id })
      if (res.code == 200) {
        if(res.data.brandCode){
          this.brandCode = res.data.brandCode
          this.getpatternType(res.data.brandCode)
        }
        this.$nextTick(() => {
          this.form.setFieldsValue({
            name: res.data.name,
            brandCode: res.data.brandCode,
            season: res.data.season,
           
            // categoryIds: res.data.categoryIds,
            meaning: res.data.meaning,
            remarks: res.data.remarks,
            source: res.data.source,
            fabricCode: res.data.fabricCode,
            decorateAccessories: res.data.decorateAccessories == 1,
            whetherHasEnglish: res.data.whetherHasEnglish == 1,
            creativeProcess: res.data.creativeProcess,
            creativeCompleteDate: res.data.creativeCompleteDate,
            creativeCompleteLocation: res.data.creativeCompleteLocation,
            firstPublishDate: res.data.firstPublishDate,
            firstPublishLocation: res.data.firstPublishLocation,
          })
          
          if (!res.data.elements.length) {
            this.ifElements = false
          }
          if (res.data.whetherHasEnglish == 1) {
            this.showEn = true
            this.$nextTick(() => {
              this.form.setFieldsValue({
                englishExplain: res.data.englishExplain,
                englishOriginal: res.data.englishOriginal
              })
            })
          }
          setTimeout(()=>{
            this.form.setFieldsValue({
              categoryIds: res.data.categoryIds,
              elements: res.data.elements.map(item => {
              return item.id
            }),
            })
          },600)
          // if (res.data.riskFlag == 1) {
          //   console.log(res.data.risk)
          //   this.showRisk = true
          //   this.$nextTick(() => {
          //     this.form.setFieldsValue({
          //       risk: res.data.risk
          //     })
          //   })
          // }
        })
      } else {
        this.$message.error('查询扩展信息详情失败')
      }

    },
    async getBrandList() {
      const data = {
        jobNumber: this.jobNumber
      }
      const res = await getSystemPro('brand', data)
      if (res.code == 200) {
        this.brands = res.data
        this.brands = this.brands.sort((a, b) => {
          const arr = ['JNBY', '速写', 'LESS', 'jnby by JNBY', 'jnby for mini', 'Pomme de terre', 'A PERSONAL NOTE 73', 'JNBY HOME']
          return arr.indexOf(a.code) - arr.indexOf(b.code)
        })
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    async getsysPro() {
      try {
        const res = await getSystemPro('season') //queryFull('element')
        this.seasons = res.data || []
        this.seasons = this.seasons.sort((a, b) => {
          return b.code.localeCompare(a.code, 'zh-CN')
        })
      } catch (error) {
        console.log(error)
      }
    },
    switchLang(status) {
      this.showEn = status
    },
    changespecial(status) {
      this.showHasPatent = status
      if (status == false) {
        this.showsupplyOriginal = false

      }
    },
    changeHasPatent(status) {
      this.showsupplyOriginal = status
    },
    changeoriginal(status) {
      this.showOriginal = status.target.value
    },
    changeRisk(status) {
      this.showRisk = status
    },
    changeCooperation(status) {
      this.showCooperation = status
    },
    changePattern(status) {
      this.showPattern = status
      if (status == false) {
        this.showPatternSource = 10
        this.showAuthorization = false
      }
    },
    changePatternSource(status) {
      this.showPatternSource = status.target.value
      if (this.showPatternSource == 10) {
        this.showAuthorization = false
      }
    },
    changeLanguageType(status) {
      this.languageType = status.target.value
    },
    changeAuthorization(status) {
      this.showAuthorization = status
    },
    changeWordage(status) {
      this.showWordage = status
      if (status == false) {
        this.showtypefaceSource = 10
        this.showtypefaceOrigin = false
        this.languageType = 10
      }
    },
    changetypefaceSource(status) {
      this.showtypefaceSource = status.target.value
      if (this.showtypefaceSource == 10) {
        this.showtypefaceSource = false
        this.showtypefaceOrigin = 10

      }
    },
    changetypefaceOrigin(status) {
      this.showtypefaceOrigin = status.target.value
    },
    async toUpdateStatus() {
      const params = {
        jobNumber: this.jobNumber,
        patternId: this.patternId,
        submitFlag: 1
      }
      try {
        const res = await toUpdateStatus(params) //queryFull('element')
        if (res.code == 200) {
          // this.$message.success('提交成功！')
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error("提交失败！")
          }

        }
      } catch (error) {
        console.log(error)
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        // console.log(err, values)
        if (!err) {
          if ((values.supplyHasPatentFile || values.supplyOriginalProve || values.supplyOriginalAuthorization) && !this.fileList.length) {
            this.$message.error('请上传文件')
          } else if (values.cooperation && !this.fileList1.length) {
            this.$message.error('请上传合作文件')
          } else if (values.patternSource && values.patternSource != 10 && !this.fileList2.length) {
            this.$message.error('请上传原始图案！')
          } else if (values.patternAuthorization && !this.fileList3.length) {
            this.$message.error('请上传授权文件')
          } 
          // else if (values.typefaceSource && values.typefaceSource != 10 && !this.fileList4.length) {
          //   this.$message.error('请上传字体原始图')
          // } else if (values.typefaceOrigin && values.typefaceOrigin == 20 && !this.fileList5.length) {
          //   this.$message.error('请上传字体来源文件')
          // }
           else {
            this.tosubmit(values)

          }
        }
      })
    },
    tosubmit(values) {
      const { workNo, realname } = this.userInfo
      if (this.pattern) {
        values.id = this.patternId
      }
      values.decorateAccessories = values.decorateAccessories ? 1 : 0
      values.whetherHasEnglish = values.whetherHasEnglish ? 1 : 0
      // values.riskFlag = values.riskFlag ? 1 : 0
      values.designerUserId = workNo
      values.designerUserName = realname
      values.jobNumber = workNo
      values.patternFlag = values.patternFlag ? 1 : 0
      values.wordage = values.wordage ? 1 : 0
      values.cooperation = values.cooperation ? 1 : 0
      values.specialProcess = values.specialProcess ? 1 : 0
      values.supplyHasPatent = values.supplyHasPatent ? 1 : 0
      values.supplyHasPatentFile = values.supplyHasPatentFile ? 1 : 0
      values.supplyOriginalProve = values.supplyOriginalProve ? 1 : 0
      values.supplyOriginal = values.supplyOriginal ? 1 : 0
      values.supplyOriginalAuthorization = values.supplyOriginalAuthorization ? 1 : 0
      if (this.fileList.length) {
        const newArr = []
        this.fileList.map((item) => {
          newArr.push(item.url)
        })
        values.moreFile = newArr.toString()
      } else {
        values.moreFile = ''
      }
      if (values.cooperation && values.cooperation == 1) {
        const newArr = []
        this.fileList1.map((item) => {
          newArr.push(item.url)
        })
        values.cooperationContractUrl = newArr.toString()
      } else {
        values.cooperationContractUrl = ''
      }
      if (values.patternSource && values.patternSource != 10) {
        const newArr = []
        this.fileList2.map((item) => {
          newArr.push(item.url)
        })
        values.patternOriginUrl = newArr.toString()
      } else {
        values.patternOriginUrl = ''
      }
      values.patternAuthorization = values.patternAuthorization ? 1 : 0
      if (values.patternAuthorization && values.patternAuthorization == 1) {
        const newArr = []
        this.fileList3.map((item) => {
          newArr.push(item.url)
        })
        values.patternAuthorizationUrl = newArr.toString()
      } else {
        values.patternAuthorizationUrl = ''
      }
      if (values.typefaceSource && values.typefaceSource != 10) {
        const newArr = []
        this.fileList4.map((item) => {
          newArr.push(item.url)
        })
        values.typefaceOriginUrl = newArr.toString()
      } else {
        values.typefaceOriginUrl = ''
      }
      if (values.typefaceOrigin && values.typefaceOrigin == 20 || values.typefaceOrigin == 30) {
        const newArr = []
        this.fileList5.map((item) => {
          newArr.push(item.url)
        })
        values.typefaceOriginProveUrl = newArr.toString()
      } else {
        values.typefaceOriginProveUrl = ''
      }
      this.submit(values, 2)
      // if (this.patternId) {
      //   const checkColor = {
      //     colorId: '',
      //     imageList: [],
      //     patternInfo: values,
      //     patternId: this.patternId,
      //     scene: 4
      //   }
      //   postAction(`/imagemanage-center/pattern/examine/check`, checkColor).then(res => {
      //     if (res.code == 30000) {
      //       this.$message.error(res.msg)
      //       this.loading = false
      //     } else if (res.code != 200 && res.code != 30000) {
      //       this.$confirm({
      //         content: res.msg,
      //         onOk: () => {
      //           this.submit(values, 1)
      //         },
      //         onCancel: () => {
      //           this.reset()
      //         }
      //       })
      //     } else {
      //       this.submit(values, 2)
      //     }
      //   })
      // } else {
      //   this.submit(values, 2)
      // }
    },
    async submit(values, key) {
      this.loading = true
      try {
        const FNCName = this.pattern ? currencyUpdate : currencyCreate
        const res = await FNCName('pattern', values)
        if (res.code == 200) {
          let text = this.pattern ? '编辑成功' : '新增成功'
          this.$message.success(text)
          let operate = this.pattern ? 1 : 0
          if(!this.pattern){
            this.patternId = res.data.id
          }
          this.toUpdateStatus()
          this.reset(values, operate)
        } else {
          this.$message.error(res.msg || res.message)
          this.loading = false
        }
      } catch (error) {
        this.loading = false
      }
      if (key == 1) {
        const initParams = {
          patternId: this.patternId,
          scene: 4,
          jobNumber: this.jobNumber
        }
        postAction(`/imagemanage-center/pattern/examine/init`, initParams).then(res => {
          if ((res.data = 200)) {
            this.$message.success('图案审核/批注状态已重置')
          } else {
            this.$message.error('图案审核/批注状态重置失败')
          }
        })
      }
    },
    reset(values, operate) {
      this.form.resetFields()
      this.loading = false
      this.fileList = []
      this.fileds = []
      this.$emit('close', values, operate)
      // this.$emit("changeEvent", values,operate);
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.poster {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  position: relative;

  &:hover {
    .img-modal {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .img {
    width: 100%;
    height: 100%;
  }

  .img-modal {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    position: absolute;
    color: #fff;
    font-size: 20px;
    width: 100%;
    top: 0;
    height: 100%;
    left: 0;
  }
}

.fileList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.tips {
  margin-left: 5px;
  cursor: pointer;
}
</style>
<style>
#patternAdd .ant-form-explain{
  color: red;
    font-weight: 500;
}
</style>
